<template>
  <view>
    <view class="title"> <view class="bl"></view>需求信息 </view>
    <form @submit="submit">
      <view class="dev-box base-info">
        <view class="info-item">
          <view class="text">需求类型</view>
		  
      <!--   <view class="select-box"  v-for="(item, index) in bangbTypeArrays1" :key="item.id"> --> 
     		<view class="select-box">
			<picker 
			  mode="selector" 
			  :range="bangbTypeArrays1.map(item => item.name)" 
			  @change="onPickerChange">
			  <view  class="padding-20"    style="margin-left: 20upx">
						{{selectedName}}
			  </view>
			</picker>
			</view>
          </view>
        <!-- </view> -->
        <view class="info-item">
          <view class="text">工作方式</view>
          <view class="select-box">
            <picker
              @change="selectMode"
              :range="modeArray"
			  mode="selector"
            >
              <input
                class="padding-20"
                placeholder="请选择工作方式"
                :value="bangb.mode"
				disabled="true"
                style="margin-left: 20upx"
				  mode="selector"
              />
            </picker>
          </view>
        </view>
        <view class="info-item">
          <view class="text">标题</view>
          <input
            v-model="bangb.title"
            type="text"
            maxlength="50"
            name="title"
            placeholder="请填写标题"
          ></input>
        </view>
        <view class="info-item">
          <view class="text">报酬</view>
          <input
            v-model="bangb.money"
            name="money"
            type="number"
            maxlength="6"
            placeholder="请填写报酬"
          ></input>
        </view>
	   <view class="info-item">
							<view class="text">是否加急</view>
							<view class="radio1" >
								<radio-group name="urgent" @change ="radioChange"  >
									<label class="radio" ><radio style="transform:scale(0.7)" value='0' />正常</label>
									<label class="radio"><radio style="transform:scale(0.7)" value='1' />加急</label>
								</radio-group>
								
							</view> 
		</view>
        <view class="info-item">
          <view class="text">截止时间</view>
          <!-- <input v-model="job.endUserTime" type="text" placeholder="请填写报名截止时间"></input> -->
          <view class="select-box">
            <input
              @click="jztimeClick"
              class="padding-20"
              disabled="true"
              placeholder="请选择服务截止时间"
              :value="bangb.endTime"
              style="margin-left: 20upx"
              name="endTime"
			  mode="selector"
            />
          </view>
        </view>
        <view class="info-item">
          <view class="text">联系电话</view>
          <input
            v-model="bangb.mobile"
            type="number"
            maxlength="11"
            placeholder="请填写联系方式"
            name="mobile"
          ></input>
        </view>
        <view class="info-item">
          <view class="text">微信号</view>
          <Input
            v-model="bangb.wx"
            type="text"
            placeholder="请填写微信号"
            name="wx"
          ></Input>
        </view>
		  <view class="text" ></view>
        <view class="info-item" style="flex-direction: row">
          <textarea
            v-model="bangb.describes"
            type="text"
            maxlength="500"
            placeholder="请填写需求描述!"
            name="describes"
          ></textarea>
        </view>
      </view>
	  注意事项:为了您的财产安全，请勿私下交易，私下交易平台不保证财产安全。
      <button class="submitBtn" form-type="submit" :disabled="btnShow">
        立即发布
      </button>
    </form>
		
    <u-datetime-picker
      :show="endTimeShow"
      v-model="endTime"
      mode="datetime"
      @confirm="endTimeShowConfirm"
	  
    ></u-datetime-picker>
	
	<uni-popup ref="popup" type="center">
	  <view
	    style="
	      background-color: white;
	      width: 80%;
	      margin: 0 auto;
	      padding: 40upx;
	      border-radius: 15upx;
	    "
	  >
	  <view>帮帮需求发布成功，可在（个人中心-我的帮帮）个中查看</view>
	  <view>请选择支付方式:</view>
	    <radio-group name="payType" @change ="payRadioChange"  >
	    	<label class="radio" ><radio style="transform:scale(0.7)" value='0' />余额支付</label>
	    	<label class="radio"><radio style="transform:scale(0.7)" value='1' />微信支付</label>
	    </radio-group>
	    <button
	      @click="toPay"
	      style="
	        background-color: #26c947;
	        color: white;
	        border-radius: 30upx;
	      "
	    >
	      确认
	    </button>
	  </view>
	</uni-popup>
	<lyy-pass-input ref="passInput" title="支付佣金" :money="bangb.money" @confirm="confirm" @close="close"> </lyy-pass-input>
  </view>
</template>

<script>
import config from "@/config/index.config.js";
export default {
  data() {
    return {
      city: '湖南省-长沙市-芙蓉区',
      startTimeShow: false,
      endTimeShow: false,
      endUserTimeShow: false,
      startTime: Number(new Date()),
      endTime: Number(new Date()),
      endUserTime: Number(new Date()),
      bangb: {
        money: 0,
        endTime: '',
        mobile: '',
        wx: '',
        title: '',
        mode: '',
        urgent: '0',
        sex: '',
		bangbType: 0,
      },
	  bangBId:'',
	  payType:'',
      btnShow: false,
      bangbTypeArrays: [
        '打卡签到',
        '写作业',
        '毕业设计',
        '门票抢购',
        '跑腿',
        '拉票',
        '送礼物',
        '求资源',
        '助力',
        '陪聊',
      ],
	  selectedName:"请选择",
	    bangbTypeArrays1: [],
      modeArray: ['线上', '线下'],
    };
  },
  onLoad() {
	  
  },
   onShow() {
	   this.bangbType();
		 this.btnShow=false;
		 
    },
  onReady() {},
  methods: {
	  jztimeClick(){
		  this.endTimeShow = true
	  },
	  async confirm(obj){
	 const reqBb =  {bangBId:this.bangBId,type:3,payType:this.payType,money:this.bangb.money,password:obj.pass}
	  uni.request({
	  	url: `${config.baseUrl}/starCityAll/wxPay/payWxCreateBb`,
	  	method: "POST",
	  	data: reqBb,
	  	dataType: "json",
	  	header: {
	  		"content-type": "application/json",
	  		"Blade-Auth":uni.getStorageSync("token")
	  	},
	  	success: (res) => {
	  		if (res.statusCode == 200) {
	  			if(res.data.code == "0"){
	  				console.log('支付成功：', res);
	  				this.$refs["passInput"].close();
	  				this.$refs.popup.close();
	  				uni.showToast({
	  				  title: '恭喜您支付成功！',
	  				})
	  				uni.navigateTo({
	  					url:'/pages/bbb/bbbPushList'
	  				})
	  			}else{
	  				uni.showToast({
	  					title: res.data.msg,
	  					icon: "none",
	  				})
	  			}
	  		}else{
	  			uni.showToast({
	  				title: "接口请求失败!",
	  				icon: "none",
	  			})
	  		}
	  	},
	  	fail: (err) => {
	  		uni.hideLoading();
	  		uni.showToast({
	  			title: "网络异常，请稍后再试!",
	  			icon: "none",
	  		})
	  		reject("网络异常，请稍后再试!");
	  	}
	  })
		
	  },
    endTimeShowConfirm(e) {
      const timeFormat = uni.$u.timeFormat;

      let timeValue = timeFormat(e.value, 'yyyy-mm-dd hh:MM');

      this.bangb.endTime = timeValue + ':00'; //value2为页面上的日期
      this.endTimeShow = false;
    },
    selectBangbType(e) {
      this.bangb.bangbType = this.bangbTypeArrays[e.target.value];
    },
	onPickerChange(event) {
	  const selectedIndex = event.detail.value;
	  this.selectedName = this.bangbTypeArrays1[selectedIndex].name; // 更新选中的名称
	  this.bangb.bangbType = this.bangbTypeArrays1[selectedIndex].id;
	},
    selectMode(e) {
		const val=e.target.value;
		   console.log("选择的值："+e.target.value)
			console.log("选择的值："+this.modeArray[e.target.value])
		this.$nextTick(() => {
			this.bangb.mode = this.modeArray[val];
		})
      
    },
	payRadioChange(e){
		   this.payType = e.detail.value;
				console.log(e.detail.value);
			},
	radioChange(e){
		   this.bangb.urgent = e.detail.value;
				console.log(e.detail.value);
			},
			
	bangbType(e){
		const type={tyepe:0}
			this.$apis.bangbType(type).then((bbtype) =>{
				this.bangbTypeArrays1=bbtype;
			
		});
		
		
			},
	toPay(){
		if(this.payType==0){
			
			this.$refs["passInput"].open();
		}else if(this.payType==1){
			const reqBb =  {bangBId:this.bangBId,type:3,payType:this.payType,money:this.bangb.money}
			 						
			this.$apis.payWxCreateBb(reqBb).then((params) => {
				// 异步操作成功的处理逻辑
				console.log('支付成功：', params);
								
							   const res =	  uni.requestPayment({
									  provider: params.package,
									  timeStamp: params.timestamp,
									  nonceStr: params.noncestr,
									  package: params.partnerid,
									  signType: "RSA",
									  paySign: params.sign,
									  success: (res) => {
									uni.showToast({
									  title: '恭喜您支付成功！',
									  
									})
									console.log("执行页面返回")
									// uni.navigateBack({
									// 	delta: 2
									// });
							
								
								uni.navigateTo({
										url:'/pages/bbb/bbbPushList'
									  });
									 this.btnShow = true;
									console.log("执行页面返回结束")
									this.onLoad();
								  
									  },
											
									  fail: (err) => {
											this.btnShow = false;
										  uni.showToast({
											title: '支付失败',err
										  })
											console.log("支付err返回",err)
										//this.getSubscribe('0')
									  }
					  });
			}),error((error) => {
				 this.btnShow = false;
				// 异步操作失败的处理逻辑
				console.error('支付失败122：', error);
			});
		}else{
			uni.showToast({
			  title: '请选择支付方式！',
			  icon: 'none',
			  position: 'bottom',
			});
		}
	},
			
    submit(e) {
      var formdata = e.detail.value;
      var that = this;
      let txt = '';
      if (this.bangb.title == '' || this.bangb.title == null) {
        txt = '需求内容不能为空！';
      } else if (this.bangb.title) {
      }
      if (txt != null && txt != '') {
        uni.showToast({
          title: txt,
          icon: 'none',
          position: 'bottom',
        });
        return;
      }
    this.$apis.submitBbb(this.bangb).then((res)=>{
		  if (res) {
				this.btnShow = true;
				const prent = this;
				that.bangBId = res.bangBId;
				that.$refs.popup.open();
			}
	  });
  
    },
  },
};
</script>

<style lang="scss">
    .title {
    margin: 20upx 4% 20upx 4%;
    font-weight: bold;
    font-size: $font-size-34;
    line-height: 50upx;
    .bl {
        border-radius: 6upx;
        float: left;
        margin-right: 20upx;
        background-color: #36b957;
        margin-top: 5upx;
        height: 40upx;
        width: 10upx;
    }
    }
    .base-info {
    padding: 0;
    .info-item {
        display: flex;
        border-bottom: 1px solid #f2f2f2;
        margin: 0upx 25upx;
        padding: 10rpx 0;
        .text {
        text-align-last: justify;
        font-size: 28upx;
        flex:1;
        width: 64upx;
        text-align: center;
        line-height: 76upx;
        font-weight: bold;
        }
        .select-box {
        flex: 4;
        background-image: url('@/static/img/icons-black.png');
        background-repeat: no-repeat;
        background-position: 95% 50%;
        background-size: 20upx 30upx;
        text {
            margin-left: 40upx;
            font-size: 28upx;
            line-height: 76upx;
        }
        }
		//单选框样式
		.radio1 {
			line-height:76rpx;
		flex: 3;
		background-repeat: no-repeat;
		background-position: 95% 50%;
		background-size: 20upx 30upx;
		 margin-left: 70upx;
		}
        input {
        flex: 4;
        height: 42upx;
        padding: 20upx;
        padding-left: 0;
        margin-left: 20px;
        }
        .space {
        flex: 4;
        }
    }
    }
    .submitBtn {
    margin: 40upx 4% 20upx 4%;
    width: 92%;
    height: 80upx;
    line-height: 80upx;
    color: white;
    border-radius: 35upx;
    background-color: #5fdb7e;
    }
</style>
